<template>
    <el-container>
        <el-header class="header">
            <div class="header-left"><el-input v-model="phone" placeholder="请输入手机号码" class="btn-search"></el-input><el-button @click="searchByPhone()">查询</el-button></div>
        </el-header>
        <el-footer>
            <el-table :data="pageInfo.list" style="width: 100%">
                <el-table-column type="expand">
                    <template #default="props">
                        <el-form label-position="left"  class="expand-form" inline>
                            <el-form-item label="订单号">
                                <span>{{ props.row.orderId }}</span>
                            </el-form-item>
                            <el-form-item label="预定人手机">
                                <span>{{ props.row.phone }}</span>
                            </el-form-item>
                            <el-form-item label="预定人">
                                <span>{{ props.row.orderName }}</span>
                            </el-form-item>
                            <el-form-item label="预定方式">
                                <span>{{ showOrderType(props.row.orderType) }}</span>
                            </el-form-item>
                            <el-form-item label="订单状态">
                                <span>{{ showOrderStatus(props.row.orderStatus) }}</span>
                            </el-form-item>
                            <el-form-item v-if="props.row.depositPrice" label="押金">
                                <span>{{ props.row.depositPrice }}(元)</span>
                            </el-form-item>
                            <el-form-item v-if="props.row.addPrice" label="附加费用(清洁费等)">
                                <span>{{ props.row.addPrice }}(元)</span>
                            </el-form-item>
                            <el-form-item label="房费">
                                <span>{{ props.row.roomFee }}(元)</span>
                            </el-form-item>
                            <el-form-item  v-if="props.row.totalPrice" label="总金额">
                                <span>{{ props.row.totalPrice}}(元)</span>
                            </el-form-item>
                            <el-form-item label="生成时间">
                                <span>{{ props.row.insertTime }}</span>
                            </el-form-item>
                            <el-form-item label="入住日期">
                                <span>{{ props.row.checkInTime}}</span>
                            </el-form-item>
                            <el-form-item label="离店日期">
                                <span>{{ props.row.checkOutTime }}</span>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-table-column>
                <el-table-column label="订单号" prop="orderId"></el-table-column>
                <el-table-column label="预定手机" prop="phone"></el-table-column>
                <el-table-column label="预定人" prop="orderName"></el-table-column>
                <el-table-column label="入住房间" prop="roomNums"></el-table-column>
                <el-table-column
                        prop="orderStatus"
                        label="订单状态"
                        width="100"
                        :filters="orderStatusFilter"
                        :filter-method="filterTag"
                        filter-placement="bottom-end">
                    <template #default="scope">
                        <el-tag :color="statusTag(scope.row.orderStatus)" disable-transitions>{{showOrderStatus(scope.row.orderStatus)}}</el-tag>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    layout="prev, pager, next"
                    :total="pageInfo.total" :current-page="pageInfo.pageNum"  @current-change="changePage">
            </el-pagination>
        </el-footer>
    </el-container>

</template>

<script>
    import { ElMessage } from 'element-plus'

    export default {
        data() {
            return {
                pageInfo: {},
                phone: '',
                orderStatusFilter: [{ text: '预定', value: 1 }, { text: '入住中', value: 2 }, { text: '已完成', value: 3 }, { text: '入住超时', value: 4 }, { text: '已取消', value: 5 }]
            }
        },
        methods: {
            changePage(page) {
                this.axios.get('orderbill/info/' + page)
                    .then(resp => {
                        if (!resp.data.flag) {
                            ElMessage.error(resp.data.msg)
                            return;
                        }
                        this.pageInfo = resp.data.data.info;
                    });
            },
            searchByPhone() {
                this.axios.get('orderbill/info/1', {
                    params: {
                        phone: this.phone
                    }
                })
                    .then(resp => {
                        if (!resp.data.flag) {
                            ElMessage.error(resp.data.msg)
                            return;
                        }
                        this.pageInfo = resp.data.data.info;
                    });
            },
            showOrderType(orderType) {
                switch (orderType) {
                    case 1: return '前台办理';
                    case 2: return '电话预约';
                    case 3: return '网上预约';

                }
            },
            showOrderStatus(orderStatus) {
                switch (orderStatus) {
                    case 1: return '预约';
                    case 2: return '入住中';
                    case 3: return '已完成';
                    case 4: return '逾期未到';
                    case 5: return '已取消';

                }
            },
            filterTag(value, row) {
                return row.orderType === value;
            },
            statusTag(orderStatus) {
                switch (orderStatus) {
                    case 3: return '#f0f9eb';
                    case 4: return '#fdf6ec';
                    case 5: return '#fef0f0';
                    default: return '#ecf5ff';
                }
            }
        },
        created() {
            this.axios.get('orderbill/info/1')
                .then(resp => {
                    if (!resp.data.flag) {
                        ElMessage.error(resp.data.msg)
                        return;
                    }
                    this.pageInfo = resp.data.data.info;
                });
        }
    }
</script>

<style scoped>
    .expand-form {
        font-size: 0;
    }
    .expand-form .el-form-item__label {
        width: 200px;
        color: #99a9bf;
    }
    .expand-form .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
    .header-left {
        float: left;
    }
    .header-right {
        float: right;
    }
    .btn-search {
        display: inline-block;
        width: 200px;
    }


</style>